$bg-1: #a9afff;
$bg-2: #b8d4ff;
$bg-3: #89f2fa;
$bg-form: #ebfcfce0;
@use "@/assets/style/sea-viewport";

#page_login {
    #loginform {
        //#loginform是定义带有表单的那个矩形
        margin: 1rem;
        border-radius: 7px;
        z-index: 3;
        background: $bg-form;
        overflow: hidden;
        display: inline-block;

        @media (min-width: sea-viewport.$phone_min) {
            opacity: 0.85;
        }


        .mask {
            position: relative;
            animation-duration: 0.375s;
            animation-fill-mode: both;
            height: 100%;


            &.inlogin {
                animation-name: toLogin;
            }

            &.inregister {
                animation-name: toRegister;
            }

            #login,
            #register {
                position: absolute;
                padding: 1rem 4rem;
                width: 100%;
                height: 100%;
                box-sizing: border-box;


                @media (max-width: sea-viewport.$desktop_max) {
                    padding: 1.5rem 3rem;


                }

                @media (max-width: sea-viewport.$phone_max) {
                    padding: 1.5rem 1rem;
                }

                .n-form {
                    .n-input {
                        background-color: #ffffffe0;
                        border: 1px red;
                    }

                    .n-form-item-feedback-wrapper {
                        min-height: 1rem;

                        //height: 1rem;
                    }
                }
            }

            #register {
                //#register是定义矩形中的login部分
                left: 516px;
                //padding-right: 1rem;
            }

            h1.title {
                font-size: 2.5rem;
                margin-bottom: 1rem;
                text-align: center;
                user-select: none;

                span {
                    //line-height: 2.625rem;
                    margin-top: 1.25em;
                    position: absolute;
                    font-size: 1rem;
                    color: #1f1fa0;

                    &:hover {
                        cursor: pointer;
                        color: orange;
                    }
                }
            }

            .devider {
                position: absolute;
                left: 500px;
                border-left: 1px solid rgb(255, 238, 0);
                border-right: 1px solid rgb(255, 238, 0);
                height: 100%;
                margin: auto 7px;
                box-sizing: border-box;
            }
        }

    }
}


@keyframes toRegister {
    from {
        left: 0;
    }

    to {
        left: -516px;
    }
}

@keyframes toLogin {
    from {
        left: -516px;
    }

    to {
        left: 0;
    }
}